{{ extend './layout/main.html'}}   
    {{block 'title'}}登录{{/block}} 
    {{block 'headercss'}}
    <link href="/public/css/login.css" rel="stylesheet" type="text/css" />
    {{/block}}
    {{block 'content'}}
    <div id="wrapper">
        <div class="aw-login-box">
            <div class="mod-body clearfix">
                <div class="content pull-left">
                    <h1 class="logo"><a href=""></a></h1>
                    <h2></h2>
                    <form action="/" method="post" id="login_form">
                        <ul>
                            <li>
                                <input v-model = "username" type="text" id="aw-login-user-name" class="form-control" placeholder="用户名" name="username" value="" />
                                <span v-text="userCheck"></span>
                            </li>
                            <li>
                                <input v-model= "password" type="password" id="aw-login-user-password" class="form-control" placeholder="密码" name="password" value="" />
                            </li>
                            <li class="alert alert-danger hide error_message">
                                <i class="icon icon-delete"></i> <em></em>
                            </li>
                            <li class="last">
                                <!-- <button type="button" class="pull-right btn btn-large btn-primary"  v-on.click.stop="">登录</button> -->
                                <button class="pull-right btn btn-large btn-primary" type="button" @click="loginbtn">登录 </button>loginbtn
                                <label>
                                    <input type="checkbox" value="1" name="remember_me" /> 记住我 </label>
                                <a href="http://wenda.golaravel.com/account/find_password/">&nbsp;&nbsp;忘记密码</a>
                            </li>
                        </ul>
                    </form>
                </div>
                <div class="side-bar pull-left">
                    <img src="/public/img/a.png" style="width: 160px">
                </div>
            </div>
            <div class="mod-footer">
                <span>还没有账号?</span>&nbsp;&nbsp;
                <a href="/user/register">立即注册</a>&nbsp;&nbsp;•&nbsp;&nbsp;
            </div>
        </div>
    </div>
    {{/block}}
    {{block 'vue'}}
    <script>
  let app = new Vue({
        el:"#app",
        data:{
            username:"",
            password:"",
            userCheck:"",
        },
        methods: {
            loginbtn(){
                if(this.username.length<2 || this.password<2){
                    window.alert("格式不正确");
                    return;
                }
                axios.post('/user/userlogin', {
                    username: this.username,
                    password: md5(this.password)
                })
                .then(function (response) {
                   let {msg} = (response);
                    console.log()
                   if(!response.data.erron){
                    window.location.href="/music/list"
                   }else{
                       window.alert(response.data.msg)
                   }
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },
        computed: {
            
        },
        watch: {
            username:_.debounce(
                function (n,o) {
                    if(n==""){
                        app.userCheck ="";
                        return;
                    }
                    axios.post('/user/check-username', {
                        username: n
                    })
                    .then(function (response) {
                            let {erron} = (response.data);
                            if(app.username==""){

                            }
                            if(!erron){
                                app.userCheck = "此用户名不在数据库中请更换";
                            }else{
                                app.userCheck ="";
                            }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },1500 
            )
        },
        mounted() {
            
        },
        created() {
            
        },

    })
    </script>
    {{/block}}
    
